<template>
	<coreshop-page title="秒杀" mode="left" bgColor="#D33123" titleColor="#fff" needLoadingPage :loadingPage="loading">
		<view class="layout-seckill-box">
			<view class="navbar-box" :style="{ 'top': `${statusBarHeight}px` }">
				<image class="bg" :style="{ 'left': state.left }"
					:src="handleStaticResources('/static/images/tab-bg.png')"></image>
				<view :class="['item', { 'on': state.tabStatus == item.status }]" v-for="item in state.tabList"
					:key="item.id" @click="handleChangeTab(item)">
					{{ item.title }}
				</view>
			</view>

			<view class="seckill-box" v-if="state.list.length > 0">
				<view class="card-box" v-for="item, index in state.list" :key="index">
					<coreshop-goods-card :goodsData="hanldeCombinationGoodsData(item)">
						<template #goodPrice>
							<view class="time" v-if="item.startStatus == IsStartSeckillEnum.start && item.startStatus">
								<view class="time-tit">仅剩：</view><uv-count-down class="down-box"
									:time="item.timestamp * 1000" format="DD天HH时mm分ss秒"></uv-count-down>
							</view>
							<view class="time"
								v-if="item.startStatus == IsStartSeckillEnum.pending && item.startStatus">
								<view class="time-tit">即将开始：</view><uv-count-down class="down-box"
									:time="item.timestamp * 1000" format="DD天HH时mm分ss秒"></uv-count-down>
							</view>
							<view class="time" v-if="item.startStatus == IsStartSeckillEnum.end && item.startStatus">
								<view class="time-tit">已结束：</view><uv-count-down class="down-box"
									:time="item.timestamp * 1000" format="DD天HH时mm分ss秒"></uv-count-down>
							</view>
							<view class="price-msg">
								<view class="price-box">
									<view class="price">
										<text class="symbol">￥</text>
										<text class="num">{{ item.price }}</text>
									</view>
									<view class="underlin-price">￥{{ item.mktPrice }}</view>
								</view>
							</view>
						</template>
					</coreshop-goods-card>
					<view class="tag-btn">
						<view class="tag-box">
							<view class="tag red" v-if="item.maxNums > 0">限购{{ item.maxNums }}{{ item.goodUnit }}</view>
							<view class="tag red" v-if="item.maxNums == 0">不限购</view>
							<view class="tag yellow" v-if="item.maxGoodsNums > 0">
								总量{{ item.maxGoodsNums }}{{ item.goodUnit }}</view>
							<view class="tag yellow" v-if="item.maxGoodsNums == 0">不限总量</view>
							<view class="tag gray">{{ item.goodViewCount }}人浏览</view>
						</view>
						<view class="btn btn-buy"
							@click="handleRouteNavigateTo(`/pages/subpackage/activity/seckill/detail/detail?id=${item.id}`)"
							v-if="item.startStatus == IsStartSeckillEnum.start">马上秒</view>
						<view class="btn btn-start" v-if="item.startStatus == IsStartSeckillEnum.pending">即将开始
						</view>
						<view class="btn btn-end" v-if="item.startStatus == IsStartSeckillEnum.end">已结束</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.data" text="暂无秒杀信息"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { useLoadingFn, useSystemInfo } from '@/core/hooks';
	import { handleStaticResources, handleRouteNavigateTo } from '@/core/utils';
	import { queryActivityList } from '@/core/api';
	import { PaymentTypeEnum, IsStartSeckillEnum, EmptyEnum } from '@/core/enum';

	interface ItabList {
		title : string;
		status : number;
		left : string;
	}

	interface QueryParams {
		id : number;
		idType : number | string;
	}

	// 获取自定义导航栏高度
	const { statusBarHeight } = useSystemInfo();

	const state = reactive<{
		tabList : Array<ItabList>;
		left : string;
		tabStatus : number;
		page : number;
		limit : number;
		totalPages : number;
		list : Array<any>;
	}>({
		tabStatus: 1,
		left: '0',
		page: 1,
		limit: 10,
		totalPages: 1,
		list: [],
		tabList: [
			{
				title: '进行中',
				status: 1,
				left: '0',

			},
			{
				title: '即将开始',
				status: 0,
				left: '33.33%',
			},
			{
				title: '已结束',
				status: 2,
				left: '66.66%',
			},
		],
	});

	const loading = ref(true);
	const handleQuerytActivityList = useLoadingFn(getActivityList, loading);
	onLoad(() => {
		handleQuerytActivityList();
	});

	onPullDownRefresh(async () => {
		state.list = [];
		await handleQuerytActivityList();
		uni.stopPullDownRefresh();
	});

	/** 切换tab */
	const handleChangeTab = (item : ItabList) => {
		if (item.status != state.tabStatus) {
			state.tabStatus = item.status;
			state.left = item.left;
			state.list = [];
			handleQuerytActivityList();
		}
	}

	/** 获取秒杀列表 */
	async function getActivityList() {

		const activityList = await queryActivityList({
			page: state.page,
			limit: state.limit,
			type: PaymentTypeEnum.seckill,
			status: state.tabStatus
		});

		state.totalPages = activityList.data?.totalPages;
		state.list = state.list.concat(activityList.data?.list);
	}

	// 组合商品数据传入组件
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			image: item.goodThumbnail,
			name: item.name,
			brief: item.goodName,
			price: item.price,
			mktprice: item.mktPrice,
		}
	}

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getActivityList();
		}
	});
</script>
<style lang="scss" scoped>
	@import './list.scss';
</style>